@extends('admin.layout.layout', ['row' => @$page])

@section('contain')


    <div class="portlet">
        <div class="portlet-title">
            <div class="caption">
                <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
            </div>
            <div class="actions"></div>
        </div>

        <div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('中文角色名称') }}</div>
                <div class="form-input">
                    <input type="text" name="role" id="simple_chinese_name" value="{{ !empty($roleModules) && !empty($roleModules[0]) ? $roleModules[0]->role_simple_chinese_name : '' }}" class="form-control" >
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('繁体角色名称') }}</div>
                <div class="form-input">
                    <input type="text" name="role" id="traditional_chinese_name" value="{{ !empty($roleModules) && !empty($roleModules[0])  ? $roleModules[0]->role_traditional_chinese_name : '' }}" class="form-control" >
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('英文角色名称') }}</div>
                <div class="form-input">
                    <input type="text" name="role" id="english_name" value="{{ !empty($roleModules) && !empty($roleModules[0])  ? $roleModules[0]->role_english_name : '' }}" class="form-control" >
                </div>
            </div>
            <div class="form-label" style="margin-bottom: 10px;">{{ ts('权限管理') }}</div>
            <table class="table table-s1">
                <thead>
                    <th>{{ ts('一级菜单') }}</th>
                    <th>{{ ts('二级菜单') }}</th>
                    <th>{{ ts('页面按钮') }}</th>
                </thead>
                <tbody>
                    @if (!empty($modules))
                        @foreach($modules as $key => $module)
                        @if (empty($module->sub_modules))
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input type="checkbox" name="module_id" class="form-check-input module_id" value="{{ $module->id  }}" data-id="{{ $module->id }}" {{ in_array($module->id, $module_id_arr) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="exampleCheck1">{{ $module->simple_chinese_name }}</label>
                                    </div>
                                </td>
                                <td></td>
                                <td>
                                    @if (!empty($module->menus))
                                        <table>
                                            @foreach($module->menus as $menu)
                                                @if ($menu->menu_module_id == $module->id)
                                                    <div class="form-check">
                                                        <input type="checkbox" name="module_id" class="form-check-input sub_menu" data-id="{{ $module->id . '-' . 0 . $menu->menu_id }}" data-module-id="{{ $menu->menu_module_id }}" value="{{ $menu->menu_module_id . '-' . $menu->menu_id }}" {{ in_array($menu->menu_id, $menu_id_arr) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="exampleCheck1">{{ $menu->menu_simple_chinese_name }}</label>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </table>
                                    @endif
                                </td>
                            </tr>
                        @endif
                        @if (!empty($module->sub_modules))
                        @foreach($module->sub_modules as $k => $item)
                            <tr>
                                <td>
                                    @if ($k === 0)
                                    <div class="form-check">
                                        <input type="checkbox" name="module_id" class="form-check-input module_id" value="{{ $module->id  }}" data-id="{{ $module->id }}" {{ in_array($module->id, $module_id_arr) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="exampleCheck1">{{ $module->simple_chinese_name }}</label>
                                    </div>
                                    @endif
                                </td>
                                <td>
                                    <div class="form-check">
                                        <input type="checkbox" name="module_id" class="form-check-input sub_modules" data-id="{{ $module->id . '-' . $item->id  }}" value="{{ $item->id }}" {{ in_array($item->id, $module_id_arr) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="exampleCheck1">{{ $item->simple_chinese_name }}</label>
                                    </div>
                                </td>
                                <td>
                                    @if (!empty($module->menus))
                                        <table>
                                        @foreach($module->menus as $menu)
                                            @if ($menu->menu_module_id == $item->id)
                                            <div class="form-check">
                                                <input type="checkbox" name="module_id" class="form-check-input sub_menu" data-id="{{ $module->id . '-' . $item->id . '-' . $menu->menu_id }}" data-module-id="{{ $menu->menu_module_id }}" value="{{ $menu->menu_module_id . '-' . $menu->menu_id }}" {{ in_array($menu->menu_id, $menu_id_arr) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="exampleCheck1">{{ $menu->menu_simple_chinese_name }}</label>
                                            </div>
                                            @endif
                                        @endforeach
                                        </table>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        @endif
                        @endforeach
                        <tr>
                            <td colspan="3">
                                <button id="saveModule" class="btn btn-default btn-primary">保存</button>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
            <div class="my-3">
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script type="text/javascript" src="/dist/layui/layui.all.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#addRole").on("click", function () {
                $('#myModal').modal('show');
            });
            $(".module_id").on("change", function () {
                let checked = $(this).is(':checked') ? true : false;
                console.log(checked);
                let module_id = $(this).attr('data-id');
                console.log(module_id);
                $(".table-s1").find(".sub_modules").each(function () {
                   let data_id = $(this).attr('data-id');
                   if (data_id.indexOf(module_id + '-') === 0) {
                       $(this).prop('checked', checked);
                   }
                });
                $(".table-s1").find(".sub_menu").each(function () {
                    let data_id = $(this).attr('data-id');
                    if (data_id.indexOf(module_id + '-') === 0) {
                        $(this).prop('checked', checked);
                    }
                });
            });

            $(".sub_menu").on("change", function () {
                if ($(this).is(':checked')) {
                    let sub_module_id = $(this).attr('data-id');
                    let module_arr = sub_module_id.split('-');
                    $(".module_id").each(function () {
                        if ($(this).attr('data-id') == module_arr[0]) {
                            $(this).prop('checked', true);
                        }
                    });
                    $(".sub_modules").each(function () {
                        if ($(this).attr('data-id') === module_arr[0] + '-' + module_arr[1]) {
                            $(this).prop('checked', true);
                        }
                    });
                }
                console.log($(this).is(":checked"));
            });

            $(".sub_modules").on("change", function () {
                let sub_module_id = $(this).attr('data-id');
                console.log(sub_module_id);
                let module_arr = sub_module_id.split('-');
                if ($(this).is(':checked')) {
                    $(".module_id").each(function () {
                        if ($(this).attr('data-id') == module_arr[0]) {
                            $(this).prop('checked', true);
                        }
                    });
                    $(".sub_menu").each(function () {
                        if ($(this).attr('data-id').indexOf(module_arr[0] + '-' + module_arr[1] + '-') === 0) {
                            $(this).prop('checked', true);
                        }
                    });
                } else {
                    $(".sub_menu").each(function () {
                        if ($(this).attr('data-id').indexOf(module_arr[0] + '-' + module_arr[1] + '-') === 0) {
                            $(this).prop('checked', false);
                        }
                    });
                }
            });

            $("#saveModule").on("click", function () {
                let simple_chinese_name = $("#simple_chinese_name").val();
                let english_name = $("#english_name").val();
                let traditional_chinese_name = $("#traditional_chinese_name").val();

                let module_ids = [];//定义一个空数组
                $("input[name='module_id']:checked").each(function(i){//把所有被选中的复选框的值存入数组
                    module_ids[i] =$(this).val();
                });
                console.log(module_ids);
                if (module_ids.length <= 0) {
                    layer.msg('缺少数据');
                    return false;
                }

                $.ajax({
                    url: '/admin/module/add',
                    type: 'post',
                    data: {
                        module_ids: module_ids,
                        role_id: '{{ $role_id ?? 0 }}',
                        _token: '{{csrf_token()}}',
                        simple_chinese_name: simple_chinese_name,
                        english_name: english_name,
                        traditional_chinese_name: traditional_chinese_name,
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        if (data.code == 0) {
                            layer.msg('操作成功', {icon: 1});
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        } else {
                            layer.msg(data.msg, {icon: 0});
                            return false;
                        }
                    }
                });
            });
        });
    </script>
@endsection
